<template>
  <div style="width:100%; height: 100vh; background-color: #cccccc; overflow: hidden">
    <div style="width: 400px; margin: 150px auto">
      <h1 style="text-align: center">共享存储柜管理系统</h1>
      <div style=" font-size: 30px; text-align: center; padding: 30px 0">欢迎注册</div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"  clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password clearable/>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input v-model="form.confirm" placeholder="请再次输入密码" show-password clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>

import request from "../utils/request";

export default {
  name: "Register",
  data() {
    return {
      form: {
        username: "",
        password: "",
        confirm: ""
      },
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        confirm: [{required: true, message: "请再次输入密码", trigger: "blur"}]
      }
    }
  },
  methods: {
    register() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.password !== this.form.confirm) {
            this.$message({
              type: "error",
              message: "两次密码输入不一致！"
            })
            return;
          } else {
            request.post("/user/register", this.form).then(res => {
              console.log(res.data)
              if (res.data.code === "0") {
                this.$message({
                  type: "success",
                  message: "注册成功"
                })
                // 登录成功后跳转页面
                this.$router.push("/login")
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
